<template>
	<view class="container">
		<view class="with_top" v-if="jinbi!==''">
			<view class="with_top_text1">
				<text>请输入充值金额</text>
				<view class="jilu" @click="jump" v-if="jinbi!==''">充值记录</view>
			</view>
			<view class="with_top_input">
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/icon-money.png" mode=""></image>
				<input type="number" placeholder="请输入充值金额" v-model="form.money"/>
			</view>
			<view class="with_top_flex">
				<text class="with_top_text2">我的金币：￥{{jinbi}}</text>
			</view>
		</view>
		<view class="with_center" v-if="false">
			<text class="left">充值方式</text>
			<view class="type">
				<view class="type-item" @click="changeType(2)">
					<image :src="form.type==2?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/icon/agree2.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/icon/agree1.png'" mode="widthFix"></image>
					<text>微信</text>
				</view>
			</view>
		</view>
		<button type="default" v-if="jinbi!==''" :disabled="btnDisabled" @click="confirm()" class="body_btn2">{{con_text}}</button>
		<view style="height: 40rpx;"></view>
	</view>
</template>

<script>
	import md5 from '@/components/MD5.js'
	var validate = require("@/components/validate/validate.js");
	var _this;
	export default {
		data() {
			return {
				jinbi:'',
				form:{
					step:1,
					money:'',
					type:2
				},
				con_text:'确认',
				btnDisabled:false,
				result:{}
			}
		},
		onLoad() {
			_this=this
			this.Recharge()
		},
		onNavigationBarButtonTap(e) {
			uni.$u.route({
				url:'pages/center/balance/recharge-list',
			})
		},
		methods: {
			jump(){
				uni.$u.route({
					url:'pages/center/balance/recharge-list',
				})
			},
			changeType(type){
				if(_this.form.type==type){
					return
				}
				_this.form.type=type
			},
			// 输入金额方法
			checkNum(e) {
			    let value = e.detail.value
			    value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
			    value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输⼊两个⼩数
			    // value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输⼊2个⼩数
			    // value = value.replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3');//只能输⼊3个⼩数
			    // value = value.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); //只能输⼊4个⼩数
			    // value = value.replace(/^(\-)*(\d+)\.(\d\d\d\d\d).*$/, '$1$2.$3'); //只能输⼊5个⼩数
			    if (value.indexOf(".") < 0 && value != "") {
			    	//以上已经过滤，此处控制的是如果没有⼩数点，⾸位不能为类似于 01、02的⾦额
			    	value = parseFloat(value);
			    }
			    if(value!=""){
			    	let parseFloatVal=parseFloat(value)
			    	if (parseFloatVal > this.jinbi) {
			    		value=this.jinbi
			    	}
			    }
			    this.$nextTick(() => {
			    	this.form.money = value;
			    })
			},
			// 输入金额方法
			checkNum1(e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				// console.log(val);
				if (!val) {
				    this.number = '';
				    return
				}
				var reg = /[^\d.]/g
							
				// 只能是数字和小数点，不能是其他输入
				val = val.replace(reg, "")
				// // 保证第一位只能是数字，不能是点
				val = val.replace(/^\./g, "");
				// // 小数只能出现1位
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				// // 小数点后面保留2位
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				this.$nextTick(() => {
				    this.number = val;
				})
			},
			//充值
			async Recharge(){
				if(_this.form.step==2){
					let openid=uni.getStorageSync('openid') || 'o4RE35WBIPcCtRZDphyMwBozNK80'
					var rule = [{
						// 字段名
						name: 'money',
						rules: ['require', 'number'],
						errorMsg: {
							require: '充值金额不能为空',
							number: '充值金额只能为数字',
						}
					}];
					// 是否全部通过，返回Boolean
					let checked = validate.check(this.form, rule);
					if (!checked) {
						// 获取错误信息
						let err = validate.getError();
						uni.$u.toast(err[0])
						return;
					}
					this.disabled = true
					this.form.openid=openid
				}
				const data = await _this.$post('api/Recharge',_this.form)
				if(data.code==10){
					_this.jinbi=data.data.jinbi
					_this.result=data.data.result
					if(_this.result.cz_open==0){
						_this.btnDisabled=true
						_this.con_text="充值暂未开放"
					}else{
						_this.btnDisabled=false
						_this.con_text="确认"
					}
				}else if(data.code==50){
					_this.btnDisabled=true
					_this.con_text="充值暂未开放"
				}else if(data.code==20){
					//唤起微信支付
					uni.requestPayment({
					    provider: 'wxpay',
						timeStamp: data.data.result.timeStamp+'',
						nonceStr: data.data.result.nonceStr,
						package: data.data.result.package,
						signType: data.data.result.signType,
						paySign: data.data.result.sign,
						success: function (res) {
							_this.$u.toast('支付成功')
							setTimeout(()=>{
								uni.$u.route({
									url:'pages/center/balance/recharge-list',
								})
							},2000)
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}else if(data.code==200){
					uni.$u.toast(data.msg);
					setTimeout(()=>{
						uni.$u.route({
							url:'pages/center/balance/recharge-list',
						})
					},2000)
				}else{
					uni.$u.toast(data.msg);
				}
				if(_this.form.step==2){
					setTimeout(()=>{
						this.disabled = false
					},2000)
				}
			},
			uploadFilePromise() {
				if(_this.btnDisabled){
					return
				}
				let sign_prefix=getApp().globalData.sign_prefix
				let sign=md5.hax_md5('pathzf_img'+'user_id'+this.user_id+ sign_prefix + this.user_token + sign_prefix).toLocaleLowerCase()
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						uni.uploadFile({
							url: _this.baseUrl+'/api/UploadPic', // 仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header:{
								token:_this.user_token
							},
							formData: {
								user_id: _this.user_id,
								path: 'zf_img',
								sign: sign
							},
							success: (result) => {
								let data=JSON.parse(result.data)
								if(data.code==200){
									_this.form.zf_img=data.img
								}else{
									uni.$u.toast(data.msg)
								}
							}
						});
					}
				});
			},
			confirm(){
				_this.form.step=2
				_this.Recharge()
			},
			copy(text){
				uni.setClipboardData({
					data:text,
					success() {
						uni.$u.toast('复制成功')
					}
				})
			},
			showImg(img){
				uni.previewImage({
					urls:[img],
					current:0
				})
			},
			call(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 20rpx 20rpx 0 20rpx;
	}
	.with_top {
		padding: 44rpx 35rpx 0 35rpx;
		border-radius: 10px;
		background: #FFFFFF;
		box-shadow: $global-shade;
	}
	
	.with_top_text1 {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.jilu{
			color: $theme-color;
		}
	}
	
	.with_top_input {
		position: relative;
		height: 60rpx;
		padding: 60rpx 0 20rpx 0;
		border-bottom: 1px solid #f3f3f3;
	}
	
	.with_top_input image {
		width: 40rpx;
		height: 56rpx;
		position: absolute;
	}
	
	.with_top_input input {
		margin-left: 60rpx;
		height: 60rpx;
		margin-top: 10rpx;
		font-size: 30rpx;
	}
	
	.with_top_flex {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	
	.with_top_text2 {
		color: #adadad;
	}
	.img-container{
		padding:20rpx;
		border-radius: 10px;
		margin-top: 20rpx;
		display: flex;
		background: #FFFFFF;
		box-shadow: $global-shade;
		.left{
			width: 20%;
		}
		.right{
			image{
				width: 200rpx;
			}
		}
	}
	.with_center {
		min-height: 90rpx;
		padding:0 20rpx;
		border-radius: 10px;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		box-shadow: $global-shade;
		.left{
			width: 20%;
		}
		.type{
			display: flex;
			align-items: center;
			.type-item{
				display: flex;
				align-items: center;
				&:not(:last-child){
					margin-right: 10rpx;
				}
				image{
					width: 36rpx;
					margin-right: 5rpx;
				}
				text{
				}
			}
		}
	}
	.with-rows{
		padding:0 20rpx;
		border-radius: 10px;
		margin-top: 20rpx;
		background: #FFFFFF;
		box-shadow: $global-shade;
		.with-row{
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			&:not(:last-child){
				border-bottom: 2rpx solid $border-color;
			}
			.left{
				width: 20%;
			}
			.right{
				flex: 1;
				display: flex;
				align-items: center;
				image{
					width: 34rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	
	.body_btn2 {
		background: $theme-color;
		margin: 0 auto;
		border-radius: 40rpx;
		margin-top: 40rpx;
		color: #f6f7fb;
		font-size: 28rpx;
		height: 85rpx;
		line-height: 85rpx;
		font-weight: 300;
		border-radius: 45rpx;
		border: none;
		color: #FFFFFF;
		&::after{
			content: none;
		}
	}
	.body_btn2[disabled]{
		background:rgba($color: #FF5D69, $alpha: 0.5);
		color: #FFFFFF;
		border: none;
	}
</style>
